<mat-tab-group [(selectedIndex)]="activeTab">
    <mat-tab id="tasks-header" href="#tasks" label="{{'PS-TAB.TASKS-TAB' | translate}}">
        <div class="page-content">
            <div class="activiti-demo-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
                <div class="activiti-demo-grid-item activiti-demo-tasks-menu" fxFlex.gt-md="225px">
                    <div class="activiti-demo-list-buttons">
                        <button color="primary" mat-raised-button data-automation-id="btn-start-task" class="activiti-demo-list-buttons-start" (click)="navigateStartTask()">
                            <mat-icon>add</mat-icon>
                            <span>{{'PS-TAB.START-TASK' | translate}}</span>
                        </button>
                    </div>
                    <adf-accordion>
                        <adf-accordion-group [heading]="'Tasks'" [isSelected]="true" [isOpen]="true"
                                             [headingIcon]="'assignment'">
                            <adf-filters
                                [filterParam]="{name:'MY tasks'}"
                                [appId]="appId"
                                [hasIcon]="false"
                                (filterClick)="onTaskFilterClick($event)"
                                (onSuccess)="onSuccessTaskFilterList($event)"
                                #activitifilter>
                            </adf-filters>
                        </adf-accordion-group>
                    </adf-accordion>
                </div>
                <div class="activiti-demo-grid-item activiti-demo-tasks-list" fxFlex.gt-md="335px" [ngClass.gt-md]="{'small-pagination': true}"
                     *ngIf="taskFilter && !isStartTaskMode()">
                    <adf-tasklist
                        [appId]="taskFilter?.appId"
                        [page]="taskPage"
                        [size]="taskPagination.maxItems"
                        [processDefinitionKey]="taskFilter?.filter?.processDefinitionKey"
                        [name]="taskFilter?.filter?.name"
                        [assignment]="taskFilter?.filter?.assignment"
                        [state]="taskFilter?.filter?.state"
                        [sort]="taskFilter?.filter?.sort"
                        [data]="dataTasks"
                        [landingTaskId]="currentTaskId"
                        (rowClick)="onTaskRowClick($event)"
                        (onSuccess)="onSuccessTaskList($event)"
                        (row-click)="onRowClick($event)"
                        (row-dblclick)="onTaskRowDblClick($event)"
                        #activititasklist>
                        <!-- Custom column definition demo -->
                        <!--
                        <data-columns>
                            <data-column key="name" title="NAME" class="full-width name-column"></data-column>
                            <data-column key="created" title="Created" class="hidden"></data-column>
                        </data-columns>
                        -->
                    </adf-tasklist>

                    <adf-pagination
                        (changePageNumber)="onChangePageNumber($event)"
                        (changePageSize)="onChangePageSize($event)"
                        (nextPage)="onNextPage($event)"
                        (prevPage)="onPrevPage($event)"
                        [pagination]="taskPagination"
                        [supportedPageSizes]="[2, 4, 6, 8, 10, 12]">
                    </adf-pagination>
                </div>
                <div class="activiti-demo-grid-item activiti-demo-tasks-details" *ngIf="!isStartTaskMode()" fxFlex.gt-md="1 1 auto">
                    <adf-task-details #activitidetails
                                           [debugMode]="true"
                                           [taskId]="currentTaskId"
                                           [fieldValidators]="fieldValidators"
                                           (formCompleted)="onFormCompleted($event)"
                                           (formContentClicked)="onFormContentClick($event)"
                                           (taskCreated)="onTaskCreated($event)"
                                           (assignTask)="onAssignTask()"
                                           (taskDeleted)="onTaskDeleted($event)">
                    </adf-task-details>
                    <hr>
                    <div *ngIf="currentTaskId">
                        {{'PS-TAB.AUDIT-LOG' | translate}}
                        <button
                            adf-task-audit
                            [task-id]="currentTaskId"
                            [download]="true"
                            mat-icon-button (clicked)="onAuditClick($event)" (error)="onAuditError($event)">
                            <mat-icon>assignment_ind</mat-icon>
                        </button>
                        <hr>
                    </div>
                    <mat-card>
                        <mat-card-content>
                            <activiti-task-attachments
                                [taskId]="currentTaskId">
                            </activiti-task-attachments>
                        </mat-card-content>
                    </mat-card>
                </div>
                <div class="activiti-demo-grid-item activiti-demo-tasks-start" *ngIf="isStartTaskMode()" fxFlex.gt-md="1 1 auto">
                    <adf-start-task
                        [appId]="appId"
                        (success)="onStartTaskSuccess($event)"
                        (cancel)="onCancelStartTask()">
                    </adf-start-task>
                </div>
            </div>
        </div>
    </mat-tab>
    <mat-tab id="processes-header" href="#processes"
            label="{{'PS-TAB.PROCESSES-TAB' | translate}}">
        <div class="page-content">
            <div class="activiti-demo-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
                <div class="activiti-demo-grid-item activiti-demo-processes-menu" fxFlex.gt-md="225px">
                    <div class="activiti-demo-list-buttons">
                        <button
                            color="primary"
                            mat-raised-button
                            class="activiti-demo-list-buttons-start"
                            data-automation-id="btn-start-process"
                            (click)="navigateStartProcess()">
                            <mat-icon>add</mat-icon>
                            <span>{{'PS-TAB.START-PROCESS' | translate}}</span>
                        </button>
                    </div>
                    <adf-accordion>
                        <adf-accordion-group [heading]="'Processes'" [isSelected]="true" [isOpen]="true"
                                             [headingIcon]="'assessment'">
                            <adf-process-instance-filters
                                [filterParam]="{index: 0}"
                                [appId]="appId"
                                (filterClick)="onProcessFilterClick($event)"
                                (onSuccess)="onSuccessProcessFilterList($event)">
                            </adf-process-instance-filters>
                        </adf-accordion-group>
                    </adf-accordion>
                </div>
                <div class="activiti-demo-grid-item activiti-demo-processes-list activiti-demo-list" fxFlex.gt-md="335px" [ngClass.gt-md]="{'small-pagination': true}"
                     *ngIf="processFilter && !isStartProcessMode()">
                    <adf-process-instance-list
                        *ngIf="processFilter?.hasFilter()" [appId]="processFilter.appId"
                        [processDefinitionKey]="processFilter.filter.processDefinitionKey"
                        [name]="processFilter.filter.name"
                        [state]="processFilter.filter.state"
                        [sort]="processFilter.filter.sort"
                        [data]="dataProcesses"
                        (rowClick)="onProcessRowClick($event)"
                        (row-dblclick)="onProcessRowDblClick($event)"
                        (onSuccess)="onSuccessProcessList($event)">
                        <!-- Custom column definition demo -->
                        <!--
                        <data-columns>
                            <data-column key="name" title="NAME" class="full-width name-column"></data-column>
                            <data-column key="created" title="Created" class="hidden"></data-column>
                        </data-columns>
                        -->
                    </adf-process-instance-list>
                </div>
                <div class="activiti-demo-grid-item activiti-demo-processes-details" *ngIf="!isStartProcessMode()" fxFlex.gt-md="1 1 auto">
                    <adf-process-instance-details
                        [processInstanceId]="currentProcessInstanceId"
                        (processCancelled)="processCancelled()"
                        (showProcessDiagram)="onShowProcessDiagram($event)"
                        (taskClick)="onProcessDetailsTaskClick($event)">
                    </adf-process-instance-details>
                    <hr>
                    <div *ngIf="currentProcessInstanceId">
                        {{'PS-TAB.AUDIT-LOG' | translate}}
                        <button adf-process-audit
                                [process-id]="currentProcessInstanceId"
                                [download]="true" mat-icon-button
                                [format]="'pdf'"
                                (clicked)="onAuditClick($event)"
                                (error)="onAuditError($event)">
                            <mat-icon>assignment_ind</mat-icon>
                        </button>
                        <hr>
                    </div>
                    <mat-card>
                        <mat-card-content>
                            <activiti-process-attachments
                                [processId]="currentProcessInstanceId">
                            </activiti-process-attachments>
                        </mat-card-content>
                    </mat-card>
                </div>
                <div class="activiti-demo-grid-item activiti-demo-processes-start" fxFlex.gt-md="1 1 auto"
                     *ngIf="isStartProcessMode()">
                    <adf-start-process
                        [appId]="appId"
                        (start)="onStartProcessInstance($event)"
                        (cancel)="onCancelProcessInstance()">
                    </adf-start-process>
                </div>
            </div>
        </div>
    </mat-tab>
    <mat-tab id="report-header" href="#report"
            label="{{'PS-TAB.REPORTS-TAB' | translate}}">
        <div class="activiti-demo-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
            <div class="activiti-demo-grid-item activiti-demo-reports-menu" fxFlex.gt-md="300px">
                <span><h5>Report List</h5></span>
                <hr>
                <analytics-report-list
                    [appId]="appId"
                    [selectFirst]="selectFirstReport"
                    (reportClick)="onReportClick($event)"
                    #analyticsreportlist>
                </analytics-report-list>
            </div>
            <div class="activiti-demo-grid-item activiti-demo-reports-details" fxFlex.gt-md="1 1 auto">
                <adf-analytics
                    *ngIf="report"
                    [appId]="appId"
                    [reportId]="report.id"
                    [hideParameters]="false"
                    (editReport)="onEditReport($event)"
                    (reportSaved)="onReportSaved($event)"
                    (reportDeleted)="onReportDeleted()">
                </adf-analytics>
                <div *ngIf="!report">
                    <span>{{'ANALYTICS_REPORT.NO_REPORT_MESSAGE' | translate}}</span>
                </div>
            </div>
        </div>
    </mat-tab>
</mat-tab-group>

<div *ngIf="fileShowed">
    <adf-viewer
        [(showViewer)]="fileShowed"
        [blobFile]="content"
        [displayName]="contentName"
        [overlayMode]="true">
    </adf-viewer>
</div>
